<template>
  <div>
    <div id="thematicmap">
      <div id="title">
        <input
          placeholder="请输入标题(不超过三十个字)"
          v-model="ArticleTitle"
        />
      </div>
    </div>
    <div id="editor">
      <mavon-editor ref="md" 
      @imgAdd="$imgAdd" 
      v-model="contect" 
      placeholder="标题推荐二号标题....."
      ></mavon-editor>
    </div>
    <div id="publish">
      <button @click="publish()">发布文章</button>
    </div>
  </div>
</template>
<script>
import { PublishArticle } from "@/service/Api.js";
import { put, getFileNameUUID /* ,deletefile*/ } from "@/utils/Alioss.js";
export default {
  data() {
    return {
      contect: "",
      ArticleHtml: null,
      imageUrl: "",
      ArticleTitle: "",
      isFirst:true,

    };
  },
  components: {},
  methods: {
    publish() {
      this.ArticleHtml = this.$refs.md.d_render;
      let params = {
        title: this.ArticleTitle,
        subs: this.ArticleHtml,
        cover: this.imageUrl,
        category_id: 1,
      };
      console.log(params);
      PublishArticle(params).then((res) => {
        console.log(res);
      });
    },
    $imgAdd(pos, $file) {
      let objName = getFileNameUUID();
      put(`asdfg${objName}`, $file).then((res) => {
        this.$refs.md.$img2Url(pos, res.url);
        if(this.isFirst ==true){
            this.imageUrl = res.url;
            console.log(res.url)
            this.isFirst=false
        }else{
            //
        }
      });
    },
    /*$imgDel($file){
            console.log($file)
            deletefile($file).then(res=>{
                console.log('未定义')
                console.log(res)
            })
        }*/
  }
};
</script>
<style scoped>
button {
  cursor: pointer;
  outline: none;
  color: #fff;
  font-size: 17px;
  font-weight: 200;
  text-align: center;
  line-height: 60px;
  background: #2196f3;
  border: 0px solid rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  left: 0;
  bottom: 0;
  max-height: 60px;
  width: 800px;
  margin: auto;
  height: 60px;
  margin-top: 16px;
  margin-bottom: 42px;
}
body {
  background: #ffffff;
}
#editor {
  width: 800px;
  margin: auto;
  height: auto;
  margin-top: 12px;
}
.v-note-wrapper {
  height: 450px;
}
#thematicmap {
  width: 800px;
  margin: auto;
  margin-top: 8px;
  height: 120px;
  margin-top: 60px;
}
#publish {
  width: 800px;
  margin: auto;
}

input:focus {
  border-width: 1px;
  border-color: #2196f3;
  box-shadow: 0 0 1px #2196f3;
  caret-color: #2196f3;
  font-weight: 10;
  outline: none;
  font-weight: 500;
  color: black;
}
placeholder {
  color: #ebebeb;
}
input {
  color: black;
  width: 778px;
  height: 120px;
  outline: none;
  font-size: 1.7em;
  font-weight: 500;
  transition: all 0.2s;
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: NONE;
  padding-left: 20px;
  margin-top: 2px;
}
#title {
  width: 600px;
  float: left;
}
</style>


